﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>短信验证码倒计时</title>
    <link type="text/css" rel="stylesheet" href="css1.css" />
    <script>
        window.addEventListener('load', function() {
            var sentBtn = document.querySelector('.sentBtn');
            var phone = document.querySelector('.phone'); //获取手机文本框
            var i = 10;

            function fnInterval() {
                var interval = setInterval(function() {
                    sentBtn.classList.add('nocli'); //添加禁止光标的类名
                    phone.classList.add('nocli'); //添加禁止光标的类名
                    phone.setAttribute('disabled', true); //添加按钮禁止
                    sentBtn.setAttribute('disabled', true); //添加按钮禁止
                    sentBtn.value = '还剩' + i + '秒';
                    if (i == -1) { //重置
                        sentBtn.classList.remove('nocli'); //移除禁止光标的类名
                        phone.classList.remove('nocli'); //移除禁止光标的类名
                        phone.removeAttribute('disabled'); //移除按钮禁止
                        sentBtn.removeAttribute('disabled'); //移除按钮禁止
                        sentBtn.value = '获取验证码';
                        i = 11; //重置定时器
                        clearInterval(interval); //移除定时器
                    };
                    i--;
                }, 1000);
            };
            fnInterval(); //打开即调用
            sentBtn.addEventListener('click', function() {
                fnInterval(); //点击调用定时器函数
            });
        });
    </script>
</head>

<body>
    <form action="#">
        手机号：<input type="text" value="1235678901" disabled="disabled" class="phone">
        <input type="button" value="获取验证码" class="sentBtn"><br/> 验证码：
        <input type="text" /><br/> 新密码：
        <input type="password" /><br/>
        <input type="button" value="提交" />
    </form>
</body>

</html>